import React, { useEffect, useState } from 'react'
import { Avatar, Card, InfiniteScroll, List } from 'antd-mobile'
import NavBarBack from '@/components/NavBarBack/NavBarBack'
import request from '@/utils/request/request';
import { RequstStatusEnum } from '@/utils/request/request.type';

export default function TeamBenefits() {
    const [data, setData] = useState<any[]>([])

    useEffect(() => {
        loadTeamList()
    }, [])

    const loadTeamList = async () => {
        const res = await request(`/newApi/user/getMyTeamInfo`, {
            method: 'GET',
        });
        console.log(res, 'res')
        const status = res.code === RequstStatusEnum.success && res.data.length > 0;

        if (status) {
            const newData = res.data
            setData(newData);
        }
    }

    return (
        <div style={{ padding: '46px 0' }}>
            <NavBarBack content={'团队成员'} style={{ maxWidth: '450px', background: '#fff', position: 'fixed', top: '0', width: '100%', zIndex: '99' }} />
            <div style={{ padding: '6px' }}>
                <List style={{ '--border-top': '0' }}>
                    {data.map((item, index) => (
                        <List.Item key={index}>
                            <Card>
                                <div className="orderItem" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                    <Avatar src={item.avatar} />
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <span style={{ marginLeft: '5px' }}>{item.nickname}</span>
                                    </div>
                                </div>
                            </Card>
                        </List.Item>
                    ))}
                </List>
            </div>
            <InfiniteScroll loadMore={loadTeamList} hasMore={false} />
        </div>
    )
}
